<template>
    <div style="margin-bottom: 20px">
        <!-- PC端 -->
        <div class="lse_user_home_pc">
            <!-- 左边头像区 -->
            <div class="lse_user_home_pc_left">
                <div style="margin:auto;text-align:center;">
                    <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-if="userInfo.portraitUrl" :size="100" :src="userInfo.portraitUrl"></el-avatar>
                    <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-else :size="100">{{userInfo.nickname.substring(0,1)}}</el-avatar>
                </div>
                <div style="text-align:center;margin-top:5px">
                    <el-tag style="white-space:normal;height:auto;word-break:break-all">{{userInfo.nickname}}</el-tag>
                </div>
                <div style="text-align:center;font-size:12px;color:grey;margin-top:5px">
                    <el-tag type="info" style="white-space:normal;height:auto;word-break:break-all">{{userInfo.homePublicity}}</el-tag>
                </div>
                <!-- 操作按钮 -->
                <div style="margin-top:10px;text-align:center;">
                    <el-button style="margin:5px 0" size="mini" @click="openUrl('editorPass')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="10" height="10" t="1590740203023" p-id="5841" version="1.1"><path d="M 475.264 728.704 a 96 96 0 0 1 42.176 -184.576 l -34.048 40.896 a 64 64 0 0 0 -14.784 40.96 v 74.24 c 0 10.24 2.368 19.904 6.656 28.48 Z M 640 384 H 256 a 64 64 0 0 0 -64 64 v 384 a 64 64 0 0 0 64 64 h 512 a 64 64 0 0 0 64 -64 V 576 h 64 v 256 a 128 128 0 0 1 -128 128 H 256 a 128 128 0 0 1 -128 -128 V 448 a 128 128 0 0 1 128 -128 a 256 256 0 0 1 464 -149.248 l -46.656 45.184 A 192 192 0 0 0 320 320 h 320 v 64 Z m -27.52 301.376 l 303.808 -362.048 l -49.024 -41.152 l -303.808 362.048 l 9.28 38.72 l 39.744 2.432 Z m 295.936 -452.224 l 49.024 41.152 a 64 64 0 0 1 7.872 90.112 l -303.808 362.112 a 64 64 0 0 1 -52.864 22.72 l -87.04 -5.248 l -20.352 -84.864 a 64 64 0 0 1 13.184 -56.064 l 303.808 -362.048 a 64 64 0 0 1 90.176 -7.872 Z m -82.304 98.048 l 49.024 41.152 l -41.088 49.024 l -49.024 -41.152 l 41.088 -49.024 Z" p-id="5842" /></svg>
                    </el-button>
                    <el-button style="margin:5px 0" size="mini" @click="openUrl('infoWrite')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="10" height="10" t="1590740078934" p-id="3346" version="1.1"><path fill="#2c2c2c" d="M 484.752 529.238 c 4.78276 0 9.62178 0.393874 14.5171 0.393874 a 264.796 264.796 0 1 0 -145.227 -43.6075 a 471.861 471.861 0 0 0 -172.404 106.627 C 95.4352 675.928 38.661 789.87 21.7244 914.109 a 99.5939 99.5939 0 0 0 23.2386 78.7748 a 88.5091 88.5091 0 0 0 66.4522 30.8347 h 345.315 a 33.7606 33.7606 0 0 0 0 -67.5213 H 111.359 a 21.1567 21.1567 0 0 1 -15.5862 -7.70868 a 32.1289 32.1289 0 0 1 -7.20227 -25.5455 c 29.9344 -219.163 198.906 -385.884 396.181 -393.705 Z M 303.851 265.173 A 195.474 195.474 0 1 1 499.044 460.648 A 195.699 195.699 0 0 1 303.851 265.173 Z" p-id="3347" /><path fill="#2c2c2c" d="M 991.836 613.471 l -34.1545 -34.042 a 36.349 36.349 0 0 0 -51.2599 0 l -42.7635 42.5384 l 85.5269 85.1331 l 42.7072 -42.4821 a 35.9551 35.9551 0 0 0 -0.056268 -51.1474 Z M 615.293 869.151 l 85.5269 85.1331 l 232.386 -229.516 l -85.4707 -85.1331 l -232.442 229.516 Z M 546.759 1023.83 v 0.168803 l 136.674 -53.8482 l -84.7392 -84.3453 l -51.9351 138.025 Z" p-id="3348" /></svg>
                    </el-button>
                    <el-button style="margin:5px 0" size="mini" @click="outLogin">
                        <Icon type="md-log-out" />
                    </el-button>
                </div>
            </div>
            <!-- 右边统计区 -->
            <div class="lse_user_home_pc_right">
                <div>
                    <div>
                        <div class="tag">
                            <b>项目</b>
                            <div>{{statistical ? statistical.project > 99 ? '99+' : statistical.project : 0}}</div>
                        </div>
                        <Divider type="vertical"></Divider>
                        <div class="tag">
                            <b>API</b>
                            <div>{{statistical ? statistical.api > 99 ? '99+' : statistical.api : 0}}</div>
                        </div>
                        <Divider type="vertical"></Divider>
                        <div class="tag">
                            <b>创建的项目组</b>
                            <div>{{statistical ? statistical.groupMe > 99 ? '99+' : statistical.groupMe : 0}}</div>
                        </div>
                        <Divider type="vertical"></Divider>
                        <div class="tag">
                            <b>加入的项目组</b>
                            <div>{{statistical ? statistical.groupJoin > 99 ? '99+' : statistical.groupJoin : 0}}</div>
                        </div>
                    </div>
                    <div id="statisticalPc" v-loading="statisticalLoading"  style="margin-top:10px;height:200px"></div>
                </div>
            </div>
        </div>
        <!-- 移动端 -->
        <div class="lse_user_home_mobile">
            <div style="margin:auto;text-align:center;">
                <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-if="userInfo.portraitUrl" :size="100" :src="userInfo.portraitUrl"></el-avatar>
                <el-avatar style="box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);" v-else :size="100">{{userInfo.nickname.substring(0,1)}}</el-avatar>
            </div>
            <div style="text-align:center;margin-top:5px">
                <el-tag style="white-space:normal;height:auto;word-break:break-all">{{userInfo.nickname}}</el-tag>
            </div>
            <div style="text-align:center;font-size:12px;color:grey;margin-top:5px">
                <el-tag type="info" style="white-space:normal;height:auto;word-break:break-all">{{userInfo.homePublicity}}</el-tag>
            </div>
            <!-- 操作按钮 -->
            <div style="margin-top:10px;text-align:center;">
                <el-button style="margin:5px 0" size="mini" @click="openUrl('editorPass')">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="10" height="10" t="1590740203023" p-id="5841" version="1.1"><path d="M 475.264 728.704 a 96 96 0 0 1 42.176 -184.576 l -34.048 40.896 a 64 64 0 0 0 -14.784 40.96 v 74.24 c 0 10.24 2.368 19.904 6.656 28.48 Z M 640 384 H 256 a 64 64 0 0 0 -64 64 v 384 a 64 64 0 0 0 64 64 h 512 a 64 64 0 0 0 64 -64 V 576 h 64 v 256 a 128 128 0 0 1 -128 128 H 256 a 128 128 0 0 1 -128 -128 V 448 a 128 128 0 0 1 128 -128 a 256 256 0 0 1 464 -149.248 l -46.656 45.184 A 192 192 0 0 0 320 320 h 320 v 64 Z m -27.52 301.376 l 303.808 -362.048 l -49.024 -41.152 l -303.808 362.048 l 9.28 38.72 l 39.744 2.432 Z m 295.936 -452.224 l 49.024 41.152 a 64 64 0 0 1 7.872 90.112 l -303.808 362.112 a 64 64 0 0 1 -52.864 22.72 l -87.04 -5.248 l -20.352 -84.864 a 64 64 0 0 1 13.184 -56.064 l 303.808 -362.048 a 64 64 0 0 1 90.176 -7.872 Z m -82.304 98.048 l 49.024 41.152 l -41.088 49.024 l -49.024 -41.152 l 41.088 -49.024 Z" p-id="5842" /></svg>
                </el-button>
                <el-button style="margin:5px 0" size="mini" @click="openUrl('infoWrite')">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="10" height="10" t="1590740078934" p-id="3346" version="1.1"><path fill="#2c2c2c" d="M 484.752 529.238 c 4.78276 0 9.62178 0.393874 14.5171 0.393874 a 264.796 264.796 0 1 0 -145.227 -43.6075 a 471.861 471.861 0 0 0 -172.404 106.627 C 95.4352 675.928 38.661 789.87 21.7244 914.109 a 99.5939 99.5939 0 0 0 23.2386 78.7748 a 88.5091 88.5091 0 0 0 66.4522 30.8347 h 345.315 a 33.7606 33.7606 0 0 0 0 -67.5213 H 111.359 a 21.1567 21.1567 0 0 1 -15.5862 -7.70868 a 32.1289 32.1289 0 0 1 -7.20227 -25.5455 c 29.9344 -219.163 198.906 -385.884 396.181 -393.705 Z M 303.851 265.173 A 195.474 195.474 0 1 1 499.044 460.648 A 195.699 195.699 0 0 1 303.851 265.173 Z" p-id="3347" /><path fill="#2c2c2c" d="M 991.836 613.471 l -34.1545 -34.042 a 36.349 36.349 0 0 0 -51.2599 0 l -42.7635 42.5384 l 85.5269 85.1331 l 42.7072 -42.4821 a 35.9551 35.9551 0 0 0 -0.056268 -51.1474 Z M 615.293 869.151 l 85.5269 85.1331 l 232.386 -229.516 l -85.4707 -85.1331 l -232.442 229.516 Z M 546.759 1023.83 v 0.168803 l 136.674 -53.8482 l -84.7392 -84.3453 l -51.9351 138.025 Z" p-id="3348" /></svg>
                </el-button>
                <el-button style="margin:5px 0" size="mini" @click="outLogin">
                    <Icon type="md-log-out" />
                </el-button>
            </div>
            <div>
                <Divider></Divider>
                <div>
                    <div class="tag">
                        <b>项目</b>
                        <div>{{statistical ? statistical.project > 99 ? '99+' : statistical.project : 0}}</div>
                    </div>
                    <Divider type="vertical"></Divider>
                    <div class="tag">
                        <b>API</b>
                        <div>{{statistical ? statistical.api > 99 ? '99+' : statistical.api : 0}}</div>
                    </div>
                    <Divider></Divider>
                    <div class="tag">
                        <b>创建的项目组</b>
                        <div>{{statistical ? statistical.groupMe > 99 ? '99+' : statistical.groupMe : 0}}</div>
                    </div>
                    <Divider type="vertical"></Divider>
                    <div class="tag">
                        <b>加入的项目组</b>
                        <div>{{statistical ? statistical.groupJoin > 99 ? '99+' : statistical.groupJoin : 0}}</div>
                    </div>
                </div>
                <Divider></Divider>
                <div id="statisticalMobile" v-loading="statisticalLoading" style="margin-top:10px;height:200px"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { Line, Pie } from '@antv/g2plot'
import IFRAME from '../util/iframe'
export default {
  name: 'userhome',
  data () {
    return {
      isXs: false,
      statisticalCanvar: undefined
    }
  },
  props: {
    userInfo: Object,
    statistical: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: undefined
    },
    statisticalLoading: true
  },
  methods: {
    draw () {
      if (!this.statistical || !this.statistical.statistical || this.statistical.statistical.length === 0) {
        return
      }
      let data = []
      for (let i = 0; i < this.statistical.statistical.length; i++) {
        let json = {
          date: this.statistical.statistical[i][0],
          value: this.statistical.statistical[i][1]
        }
        data.push(json)
      }
      if (this.statisticalCanvar) {
        this.statisticalCanvar.changeData(data)
        return
      }
      let option = data.length > 5 ? {
        title: {
          visible: false
        },
        description: {
          visible: false
        },
        forceFit: true,
        data: data,
        padding: 'auto',
        xField: 'date',
        yField: 'value',
        xAxis: {
          type: 'dateTime'
        }
      } : {
        forceFit: true,
        title: {
          visible: false
        },
        description: {
          visible: false
        },
        data,
        angleField: 'value',
        colorField: 'date',
        label: {
          visible: true,
          type: 'inner'
        },
        legend: {
          visible: true,
          position: 'bottom-center',
          flipPage: false
        }
      }
      this.statisticalCanvar = data.length > 5 ? new Line(document.getElementById(this.isXs ? 'statisticalMobile' : 'statisticalPc'), option)
        : new Pie(document.getElementById(this.isXs ? 'statisticalMobile' : 'statisticalPc'), option)
      this.statisticalCanvar.render()
    },
    outLogin () {
      this.lseajax.storageJson.remove(this.lsedata.tokenName)
      this.lseutil.go('login')
    },
    openUrl (suffix) {
      IFRAME.install({
        url: document.URL + suffix
      })
    }
  },
  mounted () {
    this.draw()
  },
  watch: {
    'statistical': function () {
      this.draw()
    }
  },
  created () {
    let width = document.body.clientWidth
    if (width <= 768) {
      this.isXs = true
    } else {
      this.isXs = false
    }
  }
}
</script>

<style scoped>
/* PC */
.lse_user_home_pc{
    display: block;
    margin-top: 30px;
}

.lse_user_home_pc_left{
    display: inline-table;
    width: calc(40% - 22px);
}

.lse_user_home_pc_right{
    display: inline-table;
    width: calc(60% - 22px);
    float: right;
}
.lse_user_home_pc_right .tag{
    display: inline-table;
    width: calc(100% / 4 - 20px);
    padding: 10px;
}
/* MOBILE */
.lse_user_home_mobile{
    display: none;
    margin-top: 30px;
}
.lse_user_home_mobile .tag{
    display: inline-table;
    width: calc(100% / 2 - 20px);
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .lse_user_home_pc{
        display: none;
    }
    .lse_user_home_mobile{
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .lse_user_home_pc{
        display: block;
    }
    .lse_user_home_mobile{
        display: none;
    }
}
</style>
